<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/util.js"></script>
</head>
<body>
<div id="app">
    姓名:<input type="text" v-model="name"><br/>
    性别：<input type="radio" name="sex" value="男" v-model="sex">男
    <input type="radio" name="sex" value="女" v-model="sex">女<br/>
    爱好：<input type="checkbox" name="hobby" value="游泳" v-model="hobby">游泳
    <input type="checkbox" name="hobby" value="看书" v-model="hobby">看书
    <input type="checkbox" name="hobby" value="打篮球" v-model="hobby">打篮球<br/>
    籍贯
    <select name="native" v-model="native">
        <option value="山西">山西</option>
        <option value="宁夏">宁夏</option>
        <option value="太原">太原</option>
        <option value="河北">河北</option>
        <option value="山东">山东</option>
        <option value="上海">上海</option>
    </select><br/>
    您填写的内容如下:姓名：{{name}}-性别{{sex}}-爱好{{hobby}}-籍贯{{native}}<br/>
    <button @click="submit()">保存</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            name:'',
            sex:'男',
            hobby:[],
            native:'山西'
        },
        created(){},
        methods:{
            submit(){
                let obj={
                    name:this.name,
                    sex:this.sex,
                    hobby:this.hobby,
                    native: this.native
                }
                console.log(obj)
            }
        }
    })
</script>
</body>
</html>